<template>
    <div>
        <!-- logo加搜索 -->
        <div class="logoAndSearch">
            <div class="logoAndSearch-container">
                <a class="logo" title="大众点评网">
                    <img src="@/assets/images/subscribe.png" alt="">
                </a>
                <div class="search">
                    <i class="iconfont icon-fangdajing"></i>
                    <input placeholder="搜索商户名" type="text">
                </div>
                <button>搜索</button>
            </div>
        </div>

        <!-- 三级菜单 -->
        <div class="category">
            <div class="categoryMenu">
                <div class="categoryMenuAll">全部分类<i class="iconfont icon-xiangxia"></i></div>
                <router-link to="/orderseat" class="order">预约订位</router-link>
            </div>
        </div>

        <!-- 最新可订 -->
        <div class="newest">
            <div class="newestConatiner">
                <div class="newestTop">最新可订</div>
                <div class="newestContent">
                    <div @click="toDetail" v-for="reserve in reserveList" :key="reserve.shopId" class="newestEvery">
                        <img :src="reserve.picUrl">
                        <div class="detail">
                            <p class="title">{{reserve.poiName}}</p>
                            <p class="grade">星级评分</p>
                            <p class="evaluate">口味9.0 环境8.7 服务8.9</p>
                            <p class="location">{{reserve.region-name}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getReserve} from '@/api/reserve'

    export default {
        name: "Orderseat",
        data(){
            return{
                reserveList:[],             //订位数据(只要8条)
            }
        },

        methods:{
            //获取订位页面的数据
            async getReserve(){
                let result = await getReserve('美食')
                if(result.code == 200){
                    this.reserveList = result.data[0].showList.slice(0,8)
                }
            },

            //跳转到详情页面
            toDetail(){
                this.$router.push('/detail')
            }
        },

        mounted(){
            //挂载后给 body 添加一个类名
            document.querySelector('body').className = 'subscribeOverall'

            //获取订位页面的数据
            this.getReserve()
        },
        //卸载前将 body 中的类名删除
        beforeDestroy(){
            document.body.removeAttribute('class','subscribeOverall')
        }
    };
</script>

<style lang="css" scoped>
/* logo加搜索样式 */
.logoAndSearch{
    height: 95px;
    background-color: #fff;
}
.logoAndSearch .logoAndSearch-container{
    width: 1190px;
    height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px 0 5px 0
}
.logoAndSearch .logoAndSearch-container .logo{
    float: left;
}
.logoAndSearch .logoAndSearch-container .search{
    float: left;
    width: 440px;
    margin-left: 30px;
    border: 2px solid #5EB22D;
}
.logoAndSearch .logoAndSearch-container .search .iconfont{
    font-size: 18px;
    margin: 0 6px;
    color: #CFCFCF;
}
.logoAndSearch .logoAndSearch-container .search input{
    border: none;
    width: 406px;
    height: 34px;
}
.logoAndSearch .logoAndSearch-container .search input:focus{
    outline: none;
    border: 0px solid #fff;
}
.logoAndSearch .logoAndSearch-container button{
    background-color: #5EB22D;
    width: 120px;
    height: 38px;
    font-size: 16px;
    color: #fff;
    border: none;
}

/* 三级菜单样式 */
.category{
    height: 37px;
    background-color: #fff;
    border-bottom: 2px solid #5EB22D;
}
.category .categoryMenu{
    width:1190px;
    margin: 0 auto;
}
.category .categoryMenu .categoryMenuAll{
    width: 210px;
    height: 37px;
    float: left;
    background-color: #5EB22D;
    padding:0 10px;
    line-height:37px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}
.category .categoryMenu .categoryMenuAll .iconfont{
    float: right;
}
.category .categoryMenu .categoryMenuAll_show{
    
}
.category .categoryMenu .order{
    width:60px;
    height: 37px;
    float: left;
    line-height: 37px;
    padding: 0 50px;
    margin-left: 10px;
    font-size: 14px;
    font-weight: bold;
    display: block;
}
.category .categoryMenu .order:hover{
    text-decoration: none;
}

/* 最新可订样式 */
.newest{
    height: 668px;
}
.newest .newestConatiner{
    width: 1190px;
    height: 100%;
    margin: 10px auto;
}
.newest .newestConatiner .newestTop{
    padding: 6px 0;
    font-weight: bold;
}
.newest .newestConatiner .newestContent{

}
.newest .newestConatiner .newestContent .newestEvery{
    width: 585px;
    height: 140px;
    background-color: #fff;
    float: left;
    margin: 0 10px 10px 0;
}
.newest .newestConatiner .newestContent .newestEvery img{
    width: 186px;
    height: 100%;
    float: left;
}
.newest .newestConatiner .newestContent .newestEvery .detail{
    float: left;
    padding: 10px 0 0 10px;
    line-height: 30px;
}
.newest .newestConatiner .newestContent .newestEvery .detail .title{
    font-weight: bold;
    font-size: 16px;
}
</style>